<template>
  <view class="take-photo-page">
    <image
      src="https://puton.huimeimeta.com/imgs/close.png"
      class="close-icon"
      @tap="
        () => {
          sheep.$router.back();
        }
      "
    />
    <view class="btn-box">
      <view class="bottom-btn upload-photo-btn" @tap="chooseImage">上传照片</view>
      <view class="bottom-btn" @tap="takePhoto">拍摄</view>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import { getAccessToken } from '@/sheep/request';
  import { getUserInfo, saveUserInfo } from '@/sheep/api/user';
  import sheep from '@/sheep';

  const selectPic = async (imgPath) => {
    console.log('selectPic: ', imgPath);

    uni.showLoading({
      icon: 'loading',
      title: '',
    });

    const userInfo = await getUserInfo();
    console.log('userInfo: -----------', userInfo);

    const formData = uni.getStorageSync('formData');
    console.log('formData: ', formData);

    await saveUserInfo({
      ...JSON.parse(userInfo.data.dataJson),
      ...formData,
      question: formData.question.toString(),
      purpose: formData.purpose.toString(),
      occasion_dressing: formData.occasion_dressing.toString(),
    }).then(() => {
      uni.showLoading({
        icon: 'loading',
        title: '',
      });

      uni.uploadFile({
        url: 'https://puton.huimeimeta.com/app-api/cloth/uploadFace',
        filePath: imgPath,
        name: 'file',
        formData: {},
        header: {
          Authorization: getAccessToken(),
        },
        success: (res) => {
          console.log('上传成功', typeof res.data);
          console.log('res.data.code: ', JSON.parse(res.data));

          if (JSON.parse(res.data).code === 200) {
            window.location.href = `https://face-canvas.huimeimeta.com/?img=${
              JSON.parse(res.data).result.fileUrl
            }&token=${getAccessToken()}`;
          }

          uni.hideLoading();
        },

        complete: () => {
          uni.hideLoading();
        },
      });
    });
  };

  const takePhoto = () => {
    uni.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['camera'],
      success: (res) => {
        selectPic(res.tempFilePaths[0]);
      },
      fail: (err) => {
        console.log('取消拍照或失败:', err);
      },
    });
  };

  const chooseImage = () => {
    uni.chooseImage({
      count: 1,
      sourceType: ['album'],
      success: (res) => {
        selectPic(res.tempFilePaths[0]);
      },
      fail: (err) => {
        console.log('取消选择或失败:', err);
      },
    });
  };
</script>

<style lang="scss" scoped>
  .take-photo-page {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-image: url('https://puton.huimeimeta.com/imgs/upload-face-bg.jpg');
    background-size: cover;
    transform: translateY(-50px);
    .close-icon {
      width: 48rpx;
      height: 48rpx;
      position: absolute;
      left: 40rpx;
      top: 120rpx;
    }
    .btn-box {
      width: 100%;
      height: 292rpx;
      background: rgba(0, 0, 0, 0.5);
      position: fixed;
      left: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      .bottom-btn {
        width: 314rpx;
        height: 80rpx;
        color: #fff;
        font-size: 28rpx;
        text-align: center;
        line-height: 80rpx;
        background: #031c24;
        margin-top: 90rpx;
      }
      .upload-photo-btn {
        margin-right: 26rpx;
      }
    }
  }
</style>
